<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8"/>

		<title>万天互娱</title>
		<link href="../static/zhuanpan/style.css" rel="stylesheet" type="text/css" />

	</head>

	<body>
		<div id="message" style="background-color: #f3f125">
			<h2 style="text-align: center;"></h2>
		</div>
		<div class="box" >
			
			<p class="title">疯狂夺宝</p>
			
			<img src="../static/zhuanpan/images/1.png" id="shan-img" style="display:none;" />
			<img src="../static/zhuanpan/images/2.png" id="sorry-img" style="display:none;" />
			<div class="banner">
				<div class="turnplate" style="background-image:url(../static/zhuanpan/images/turnplate-bg.png);background-size:100% 100%;">
					<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
					<img class="pointer" src="../static/zhuanpan/images/turnplate-pointer.png" />
				</div>
			</div>

		</div>
		<script type="text/javascript" src="../static/zhuanpan/js/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="../static/zhuanpan/js/awardRotate.js"></script>
		<script type="text/javascript" src="../static/sockjs.min.js" ></script>
		<script type="text/javascript" src="../static/zhuanpan/js/roller.js"  ></script>

		<script type="text/javascript" th:inline="JavaScript" >

            $(document).ready(function() {





                var PATH = [[${session.contextpath}]];
                var websocket = null;
                if (window['WebSocket'])
                // ws://host:port/project/websocketpath
                    websocket = new WebSocket("ws://" + window.location.host + PATH + '/websocket');
                else
                    websocket = new new SockJS(PATH + '/websocket/socketjs');

                websocket.onopen = function(event) {
                    heartCheck.start();
                    console.log('open', event);
                };
                websocket.onmessage = function(event) {
                    heartCheck.reset();
                    console.log('message', event.data);
                    if( event.data == 1){
						 //可以无限制的摇
                        //if(turnplate.bRotate) return;
                        //turnplate.bRotate = !turnplate.bRotate;
                        //获取随机数(奖品个数范围内)
                        var item = rnd(1, turnplate.restaraunts.length);
                        //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
                        rotateFn(item, turnplate.restaraunts[item - 1]);
					}else if (event.data.toString().localeCompare("HeartBeat") !=0 ){

                        $('div#message > h2').text(event.data);
					}
                };

                var heartCheck = {
                    timeout: 10000,//60ms
                    timeoutObj: null,
                    reset: function(){
                        clearTimeout(this.timeoutObj);
                        this.start();
                    },
                    start: function(){
                        this.timeoutObj = setTimeout(function(){
                            websocket.send("HeartBeat");
                        }, this.timeout);
                    }
                }

			});
		</script>
	</body>

</html>